import React, { Component } from 'react';
import {
  Table,
  Pagination,
  Grid,
} from '@alifd/theme-ds-jxc';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import PageHead from '../../../../components/PageHead';
import ChooseHead from '../chooseHead';
import service from '../../../../utils/service';
import { getLocalTime } from '../../../../utils/localTime';
import api from '../../../../utils/api';
import './index.scss';

const { Row, Col } = Grid;
function TableFooter(props) {
  return (
    <div style={{ fontSize: '14px' }}>
      <span style={{ display: 'inline-block', background: '#FF6E02', padding: '10px', color: '#fff', marginRight: '20px' }}>合计：</span>
      <span style={{ marginRight: '20px' }}>数量：<span style={{ color: '#D95700' }}>{props.data.stock_sum}</span></span>
      <span style={{ marginRight: '20px' }}>进货总金额：<span style={{ color: '#D95700' }}>{props.data.buying_price_sum}</span> </span>
      <span style={{ marginRight: '20px' }}>销售总金额：<span style={{ color: '#D95700' }}>{props.data.retail_price_sum}</span></span>
    </div>
  );
}

@withRouter
export default class goodList extends Component {
  state = {
    current: 1,
    isLoading: true,
    data: [],
    page: 1,
    filterData: {
      class_id: '',
      start_time: '',
      end_time: '',
    },
    purList: [], // 数据列表
    countPage: 1, // 总页数
    perPage: 10, // 每页数据量
    count: {}, // 统计
  };

  // 获取采购统计表单
getPurList= () => {
  service({
    method: 'get',
    url: api.PurInSumList,
    params: {
      class_id: this.state.filterData.class_id || '',
      start_time: this.state.filterData.start_time,
      end_time: this.state.filterData.end_time,
      page: this.state.page || 1,
    },
  })
    .then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        const purList = res.data.list;
        const count = res.data.count;
        const countPage = res.data.count_page;
        if (purList.length != 0) {
          purList.forEach((item) => {
            item.update_time = getLocalTime(item.update_time);
          });
        }
        this.setState(
          {
            purList,
            countPage,
            count,
            isLoading: false,
          }
        );
      }
    });
}
componentDidMount() {
  this.getPurList();
}

  handlePaginationChange = (page) => {
    this.setState(
      {
        page,
        isLoading: true,
      },
      () => {
        this.getPurList();
      }
    );
  };
  // 点击下载
  handleDownload=() => {
    window.location.href = `${api.PurInSumList}?excel=1&class_id=${this.state.filterData.class_id}&start_time=${this.state.filterData.start_time}&end_time=${this.state.filterData.end_time}`;
  }
  handleFilterChange = (value) => {
    let start_time = '';
    let end_time = '';
    if (value.time) {
      if (value.time[0]) {
        start_time = new Date(value.time[0].toLocaleString()).toLocaleDateString();
      }
      if (value.time[1]) {
        end_time = new Date(value.time[1].toLocaleString()).toLocaleDateString();
      }
    }
    this.setState(
      {
        filterData: {
          class_id: value.class_id || '',
          start_time,
          end_time,
        },
        isLoading: true,
      }, () => {
        console.log(this.state.filterData);
        this.getPurList();
      }
    );
  };
  render() {
    const { isLoading, purList, page, countPage, perPage, count } = this.state;

    return (
      <div style={styles.container}>
        <ChooseHead filterChange={this.handleFilterChange} />
        <PageHead title="采购统计列表" buttonText="导出Excel" onClick={this.handleDownload} />
        <IceContainer style={{ padding: '20px 0 0 0 ' }}>
          <Table loading={isLoading} dataSource={purList} hasBorder={false}>
            <Table.Column title="商品条码" dataIndex="goods_bar_code" />
            <Table.Column title="商品名称" dataIndex="goods_name" />
            <Table.Column title="型号" dataIndex="model" />
            <Table.Column title="色号/膜层" dataIndex="color_layer" />
            <Table.Column title="数量" dataIndex="stock" />
            <Table.Column title="零售价" dataIndex="retail_price" />
            <Table.Column title="进货价" dataIndex="buying_price" />
            <Table.Column title="镜片类型" dataIndex="lens_type" />
            <Table.Column title="折射率" dataIndex="refractivity" />
            <Table.Column title="屈光度" dataIndex="diopter" />
            <Table.Column title="散光度" dataIndex="astigmatism" />
            <Table.Column title="折扣" dataIndex="rebate" />
            <Table.Column title="生产批号" dataIndex="batch_number" />
            <Table.Column title="采购日期" dataIndex="update_time" />
            <Table.Column title="到期日期" dataIndex="due_time" />
            {/* <Table.Column title="操作" cell={this.renderOper} /> */}
          </Table>
          <TableFooter data={count} />
        </IceContainer>
        <Pagination
          style={styles.pagination}
          current={page}
          onChange={this.handlePaginationChange}
          total={perPage * countPage}
        />
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
};
